<template>
  <div class="wishList">
    <!-- <div class="ads">
      <img src="@/assets/images/needGoods.png" alt="banner">
    </div> -->
    <ul class="forms">
      <li>
        <h2>请填写您想发的物品链接</h2>
        <el-input class="inp" v-model="goods" placeholder="请您告知我们您希望发的货品，可以是您自己的货物，也可以是我们来帮您采购"></el-input>
      </li>
      <li>
        <h2>请填写您的采购价</h2>
        <el-input class="inp" v-model="price" type="number" placeholder="我们力求能帮您降低50%的采购成本"></el-input>
      </li>
      <li>
        <h2>请填写您的联系方式</h2>
        <el-input class="inp" v-model="phone" type="number" placeholder="手机号码"></el-input>
        <el-input class="inp" v-model="name" placeholder="称呼"></el-input>
      </li>
      <li class="handler">
        <b class="button-l" @click="handlerTest">提交</b>
      </li>
    </ul>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapGetters } from 'vuex'
export default {
  name: 'wishList',
  data () {
    return {
      goods: '',
      price: '',
      phone: '',
      name: ''
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  methods: {
    handlerTest () {
      if (this.goods === '') {
        this.$message({
          message: '请填写想发的物品',
          type: 'warning'
        })
      } else if (this.price === '') {
        this.$message({
          message: '请填写采购价格',
          type: 'warning'
        })
      } else if (this.phone === '') {
        this.$message({
          message: '请填写联系手机号',
          type: 'warning'
        })
      } else if (this.name === '') {
        this.$message({
          message: '请填写联系姓名',
          type: 'warning'
        })
      } else {
        this.handler()
      }
    },
    handler () {
      this.$ajax.post('/api/wishList/addWishList', {
        sellerAccountId: this.userInfo.sellerAccountId,
        productName: this.goods,
        price: this.price,
        concatTelephone: this.phone,
        concatName: this.name
      }).then((data) => {
        if (data.data.code === '200') {
          this.$alert('提交成功，客服会在两个工作日内与您取得联系', '提交成功', {
            confirmButtonText: '确定',
            type: 'success',
            callback: action => {
              this.$router.push({ name: 'giftStore' })
            }
          })
        } else {
          this.$message({
            message: data.data.message,
            type: 'warning'
          })
        }
      }).catch((err) => {
        console.error(err)
        this.$message({
          message: '生意太火爆了, 请稍后再试',
          type: 'error'
        })
      })
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.wishList
  .ads
    position relative
    height 120px
    overflow hidden
    img
      position absolute
      top 0
      left 0
      height 100%
      width 100%
  .forms
    // width 600px
    margin 20px auto 40px
    .inp
      // width 600px
      margin-bottom 10px
    .handler
      margin-top 40px
      text-align center
    li
      margin-bottom 10px
      h2
        font-size 20px
        font-weight bold
        margin-bottom 12px
</style>
